<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>添加组员昵称</title>
		<script type="text/javascript">
			/* 
			0、输入框获取光标 onfocus，自动删除内容 value=""
			
			1、点击继续添加 ，添加昵称
				- 不能为空
				- 不能重复
				- 不能有逗号
				
			   2、点击完成添加，展示昵称
				- 以斜体形式展示昵称
				- 昵称要按照字符串形式排序
			 */
			// 页面加载事件
			window.onload = function() {
				// 获取标签
				var member = document.querySelector("#member")
				var mycontinue = document.querySelector("#continue")
				var complete = document.querySelector("#complete")
				var msg = document.querySelector("#msg")
				var arr = [] ; //空数组---存储昵称
				
				// 输入框获取光标，自动删除内容
				member.onfocus = function(){
					this.value = "" //设置自己的内容为空----删除输入框内容
				}
				
				// 点击继续添加
				// 点击继续添加--- 获取用户的输入数据--- 判断：空，逗号，重复（用数组存一份）---存储昵称（存数组中）
				mycontinue.onclick = function(){
					//输入框中的数据---用户的输入数据
					var inp = member.value 
					//要把字符串的两端的空格去掉
					inp = inp.trim()
					// 判断字符串是否为空
					if(inp==""){
						alert("昵称不能为空")
					}else if(inp.indexOf(",") != -1){  //判断字符串中是含有 逗号 
						alert("昵称不能包含逗号,")
					}else if(arr.indexOf(inp) != -1){  // 判断数组中是否有昵称
						alert("昵称不能重复")
					}else{
						arr.push(inp)  //将昵称追加到数组中
					}
				}
				
				// 点击添加完成
				// 你添加的组员昵称如下
				complete.onclick = function(){
					//先对数组排序
					arr.sort() 
					// 设置标签的初始内容
					msg.innerHTML = "你添加的组员昵称如下：<br/>"
					// 通过循环 将数组中所有元素设置为标签内容
					for(var i in arr){
						msg.innerHTML = msg.innerHTML + arr[i].italics() + "<br/>"
					}
				}
			}
		</script>
	</head>
	<body>
		<label for="member">请输入组员昵称：</label>
		<input type="text" name="txtMember" id="member" autocomplete="off">
		<button id="continue">继续添加</button>
		<button id="complete">完成添加</button>
		<div id="msg">
			<!-- 你添加的组员昵称如下： -->
			<!-- 昵称1 -->
			<!-- 昵称2 -->
		</div>
	</body>
</html>
